<template>
  <div class="left">

    <div class="left-l">
      <ul>
        <li>
          <span class="fl">
            华洁环卫集团
          </span>
          <img class="fl" src="../../assets/ganshiao-img/箭头.png" />
        </li>
        <li v-for="count in 14">
          <span class="fl">
            华洁环卫集团
          </span>
        </li>
      </ul>
    </div>

    <div class="left-r">
      <ul>
        <li>
          <span class="fl">华城垃圾焚烧厂</span>
        </li>
        <li>
          <span class="fl">华城垃圾焚烧厂</span>
          <img class="fl" src="../../assets/ganshiao-img/警报管理.png" />
        </li>
        <li v-for="count in 13">
          <span class="fl">华城垃圾焚烧厂</span>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    components: {},
    mounted() {},
    methods: {}
  }
</script>
<style>
  .left{
     position: absolute;
     width: 20%;
     height: 100vh;
  }
  .left-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;
    border-right: 1px solid #575F65;
    background-color: #0D1518;
    opacity: 0.6;
  }

  .left-l ul li {
    padding-top: 16%;
    padding-bottom: 16%;
    padding-left: 15%;
    padding-right: 15%;
    font-size: 12px;
  }

  .left-r {
    position: absolute;
    top: 2%;
    left: 52%;
    width: 45%;
    height: 96%;
    border: 1px solid #547276;
    background-color: #0D1518;
    opacity: 0.9;
  }

  .left-r ul li {
    padding-top: 15%;
    padding-bottom: 15%;
    padding-left: 15%;
    padding-right: 15%;
    font-size: 12px;
  }
</style>
